<template>
    <div class="my-tag">
      <input
        class="input"
        type="text"
        placeholder="输入标签"
        v-if="edit"
        v-focus
        @blur="edit = false"
        @keydown.enter="confirm"
        v-model="tag"
      />
      <div @dblclick="showEdit" v-else class="text">{{ value }}</div>
    </div>
  </template>
  
  <script>
  export default {
    props:{
      value:{
        type:String,
        require:true
      }
    },
    //自定义指令
    directives:{
      focus:{
        inserted(el){
          el.focus()
        }
      }
    },
    data(){
      return {
        edit:false,
        tag:''
      }
    },
    methods:{
      showEdit(){
        this.edit=true
      },
      confirm() {
      // 如果用户没有输入任何内容, 我就给个默认值
      if (this.tag === '') {
        this.tag = '暂无'
      }
      // 当用户按下回车时触发该事件
      // 将用户输入的内容传递给父组件
      this.$emit('input', this.tag)
      // 让文本框隐藏
      this.edit = false
    }
    }
  }
  </script>
  
  <style lang="less">
  .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
  </style>